/**
 * 基础菜单 用电用户管理
 */
<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用电用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="搜索：">
                <el-input
                    size="small"
                    v-model="searchData.name"
                    placeholder="输入用户名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input
                    size="small"
                    v-model="searchData.phone"
                    placeholder="输入手机号"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="search"
                    >搜索</el-button
                >
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-table
            size="small"
            :data="listData"
            v-loading="loading"
            border
            element-loading-text="拼命加载中"
            style="width: 100%"
        >
            <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="50"
            >
            </el-table-column>
            <el-table-column prop="nickName" label="用户昵称" width="150">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="80">
            </el-table-column>
            <el-table-column prop="phone" label="手机" width="150">
            </el-table-column>
            <!-- <el-table-column prop="email" label="邮箱" width="200">
            </el-table-column> -->
            <el-table-column prop="address" label="address" width="200">
            </el-table-column>
            <el-table-column
                sortable
                prop="editTime"
                label="更新时间"
                width="150"
            >
                <template slot-scope="scope">
                    <div>{{ scope.row.updatedAt | timestampToTime }}</div>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" min-width="200" v-if="false">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deleteUser(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 分页组件 -->
        <!-- <Pagination
            v-bind:child-msg="pageparm"
            @callFather="callFather"
        ></Pagination> -->
        <!-- 编辑界面 -->
        <el-dialog
            :title="title"
            :visible.sync="editFormVisible"
            width="30%"
            @click="closeDialog"
        >
            <el-form
                label-width="120px"
                :model="editForm"
                :rules="rules"
                ref="editForm"
            >
                <el-form-item label="用户名称" prop="deptName">
                    <el-input
                        size="small"
                        v-model="editForm.deptName"
                        auto-complete="off"
                        placeholder="请输入用户名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="用户代码" prop="deptNo">
                    <el-input
                        size="small"
                        v-model="editForm.deptNo"
                        auto-complete="off"
                        placeholder="请输入用户密码"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    :loading="loading"
                    class="title"
                    @click="submitForm('editForm')"
                    >保存</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import { httpAjax } from '../../api/axiosFun';
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            nshow: true, //switch开启
            fshow: false, //switch关闭
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '添加',
            editForm: {
                deptId: '',
                deptName: '',
                deptNo: '',
                token: localStorage.getItem('logintoken')
            },
            // rules表单验证
            rules: {
                deptName: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' }
                ],
                deptNo: [{ required: true, message: '请输入用户代码', trigger: 'blur' }]
            },
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            // 删除用户
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [
                // {
                //     address: "",
                //     avatar: "default.jpg",
                //     id: 1,
                //     phone: "15602232488",
                //     sex: 2,
                //     updatedAt: null,
                //     userId: "1",
                //     nickName: ''
                // },
            ], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 1,
                total: 10
            },
            // 
            // 
            searchData:{
                phone:'',
                name:'',
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
        this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 获取公司列表
        getdata() {
            let self = this;
            this.loading = true
            httpAjax({
                method: 'POST',
                url: '/api/getUserDo',
                data: {
                    phone:self.searchData.phone,
                    name:self.searchData.name,
                }
            }).then(ret => {
                console.log(ret)
                this.listData = ret.data.data

            })
            this.loading = false
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            // this.getdata(this.formInline)
        },
        // 搜索事件
        search() {
            this.getdata(this.formInline)
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            this.editFormVisible = true
            if (row != undefined && row != 'undefined') {
                this.title = '修改'
                this.editForm.deptId = row.deptId
                this.editForm.deptName = row.deptName
                this.editForm.deptNo = row.deptNo
            } else {
                this.title = '添加'
                this.editForm.deptId = ''
                this.editForm.deptName = ''
                this.editForm.deptNo = ''
            }
        },
        // 编辑、增加页面保存方法
        submitForm(editData) {
            this.$refs[editData].validate(valid => {
                if (valid) {
                    deptSave(this.editForm)
                        .then(res => {
                            this.editFormVisible = false
                            this.loading = false
                            if (res.success) {
                                this.getdata(this.formInline)
                                this.$message({
                                    type: 'success',
                                    message: '公司保存成功！'
                                })
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: res.msg
                                })
                            }
                        })
                        .catch(err => {
                            this.editFormVisible = false
                            this.loading = false
                            this.$message.error('公司保存失败，请稍后再试！')
                        })
                } else {
                    return false
                }
            })
        },
        // 删除公司
        deleteUser(index, row) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                deptDelete(row.deptId)
                    .then(res => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '已删除!'
                            })
                        } else {
                            this.$message({
                                type: 'info',
                                message: res.msg
                            })
                        }
                    })
                    .catch(err => {
                        this.loading = false
                        this.$message.error('公司删除失败，请稍后再试！')
                    })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        // 关闭编辑、增加弹出框
        closeDialog() {
            this.editFormVisible = false
        }
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}
.userRole {
    width: 100%;
}
</style>

 
 